<template>
  <div class="mod-config">
    <el-card class="box-card search-input" shadow="never">
      <el-form  label-width="120px"  size="mini" :model="dataForm" @keyup.enter.native="findPage()">
        <el-col :span="6">
          <el-form-item label="敏感词：" prop="content">
            <el-input v-model="dataForm.content" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button  type="primary" @click="findPage()">查询</el-button>
            <el-button @click="reset()">重置</el-button>
            <el-button  type="primary" @click="dialogVisibleAdd=true">新增敏感词</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
    <el-row style>
      <el-col>
        <h3 style="margin-left: 10px">敏感词列表</h3>
      </el-col>
    </el-row>
    <el-row>
      <div style="width: 100%;height: auto; padding: 10px 50px 0px 50px; box-sizing: border-box">
        <el-tag
          style="margin:15px 15px 15px 15px;"
          v-for="tag in tags"
          :key="tag.id"
          closable
          @close="deleteClose(tag.id)"
          type="info">
          {{tag.content}}
        </el-tag>
      </div>
    </el-row>
    <el-dialog
      width="40%"
      title="添加敏感词"
      :close-on-click-modal="false"
      :visible.sync="dialogVisibleAdd">
      <el-card class="box-card" shadow="never">
        <el-form  label-width="120px"  size="mini" :rules="rules">
          <div style="margin-right: 10px">
            <el-tag
              style="margin-right:  10px;margin-top:  10px;"
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
              :style="inputNewTag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
              maxlength="60" placeholder="最多可编辑60个字"
            >
            </el-input>
            <el-button v-else  :style="buttonNewTag" size="small" @click="showInput">添加</el-button>
          </div>
          <div>
            <el-col :span="24"  style="margin-top: 10px">
              <el-form-item style="margin: 0 auto" >
                <el-button type="primary" @click="addSubmitForm()">确定</el-button>
              </el-form-item>
            </el-col>
          </div>
        </el-form>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
  import CyTable from "./component/CyTable";
  import CySelect from "./component/CySelect";
  export default {
    components: {
      CyTable,
      CySelect
    },
    data() {
      return {
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        dialogVisibleAdd: false,
        loading: false,
        moreBtnDisable: true,
        dataForm: {},
        columns: [],
        filterColumns: [],
        pageResult: [{'id': 'xxx', 'number': 'xx'}],
        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        visible: false,
        tags: [],
        buttonNewTag: {
          'height': '32px',
          'line-height': '30px',
          'padding-top': 0,
          'padding-bottom': 0,
          'margin-top': '10px'
        },
        inputNewTag: {
          'width': '180px',
          'margin-left': '10px',
          'vertical-align': 'bottom',
          'margin-top': '10px'
        },
        rules: {},
      }
    },
    mounted: function () {
      this.columns = [
        {prop: "content", label: "铭感词", minWidth: 100},
      ];
      let temp = [];
      this.columns.forEach(function (key, val) {
        temp.push(key);
      });
      this.filterColumns = temp;
      this.findPage()
    },
    methods: {
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      deleteClose: function (id) {
        this.$confirm("确认删除吗？", "提示", {}).then(() => {
          this.editLoading = true;
          this.utils.request.liveRequest({
            url: '/api/v1/broadcast/liveSensitiveWords/' + id,
            method: 'delete'
          }).then(result => {
            let data = result.data;
            if (data && data.code === '0') {
              this.findPage();
              this.$forceUpdate();
              this.$message({message: "操作成功", type: "success"});
            }
          });
        })
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },

      // 获取数据列表
      findPage() {
        let this_ = this;
        this.dataListLoading = true
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/liveSensitiveWords',
          method: 'get',
          params: this.dataForm
        }).then(result => {
          let data = result.data;
          if (data.code === '0') {
            this_.tags = data.data;
            this_.$forceUpdate();
          }
          this_.dataListLoading = false
        })
      },
      //重置
      reset() {
        this.dataForm = {};
        this.findPage();
      },
      addSubmitForm: function () {
        this.$confirm("确认提交吗？", "提示", {}).then(() => {
          let this_ = this;
          let contents = this.dynamicTags;
          let addDataForm = [];
          contents.forEach(val => {
            let liveSensitiveWords = {content: ""}
            liveSensitiveWords.content = val;
            addDataForm.push(liveSensitiveWords);
          });
          if (addDataForm.length > 0) {
            this.utils.request.liveRequest({
              url: '/api/v1/broadcast/liveSensitiveWords/list',
              method: 'post',
              params: addDataForm
            }).then(result => {
              let data = result.data;
              if (data && data.code === '0') {
                this_.dynamicTags = [];
                this.findPage();
                this.$forceUpdate();
                this.$message({message: "操作成功", type: "success"});
              }
              this_.dialogVisibleAdd = false

            });
          } else {
            this.$message({message: "请至少输入一个敏感词", type: "info"});
          }
        });
      },
    }
  }
</script>
<style scoped lang="scss">

</style>
